<template>
    <div style="display: flex; justify-content: center">
      <el-form ref="form" :model="form" label-width="100px">
        <el-form-item label="表名">
          <!-- <el-select v-model="form.TableName" clearable placeholder="请选择">
            <el-option>
              <span v-if="form.TableName == 'Role'">角色表</span>
              <span v-if="form.TableName == 'User'">用户表</span>
            </el-option>
          </el-select> -->
        <el-input v-model="form.TableName" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="字段名称">
          <el-input v-model="form.Ename" style="width: 200px"></el-input>
        </el-form-item>
        <el-form-item label="选择单元组件">
          <el-select v-model="form.Aid" clearable placeholder="请选择">
            <el-option
              v-for="item in extendList"
              :key="item.Aid"
              :label="item.Aattribute"
              :value="item.Aid"
            >
              <span v-if="item.Aattribute == 1">文本框</span>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">添加</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script>
  export default {
    data() {
      return {
        form: {},
        extendList: [],
      };
    },
    methods: {
      onSubmit() {
        this.axios
          .post("http://localhost:5255/api/Role/AddExtend", this.form)
          .then((res) => {
            if (res.data.Success) {
              this.$message.success(res.data.ErrorInfo);
              this.$emit("CloseRoleAddDia");
            } else {
              this.$message.error(res.data.ErrorInfo);
            }
          });
      },
      ExtendList() {
        this.axios
          .get("http://localhost:5255/api/Role/GetAttrbutes")
          .then((res) => {
            this.extendList = res.data.Result.Data;
            console.log(res.data.Data);
          });
      },
    },
    created() {
      this.ExtendList();
    },
  };
  </script>
  
  <style>
  </style>